<template>
	<view class="community">
		<view class="left">
			<text :class="{activeClass:activeId===item.id}" @click="onChange(item.id)" v-for="item in categoryList"
				:key="item.id">{{item.title}}</text>
		</view>
		<view class="right">
			<template v-if="imageList.length>0">
				<view class="right-item" v-for="item in imageList" :key="item.id">
					<image @click="viewImage(item.img_url)" class="img" :src="item.img_url" mode=""></image>
					<text style="display: inline-block;margin-bottom: 20rpx;">{{item.title}}</text>
					<text style="display: inline-block;line-height:60rpx;">{{item.zhaiyao}}</text>
				</view>
			</template>

			<view v-else style="padding:15rpx;">
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categoryList: [],
				activeId: 14,
				imageList: []
			};
		},
		onLoad() {
			this.getCategory()
			this.getImages(this.activeId)
		},
		methods: {
			async getCategory() {
				this.categoryList = await this.$myRequest({
					url: '/api/getimgcategory'
				})

			},
			async getImages(id) {
				this.imageList = await this.$myRequest({
					url: '/api/getimages/' + id
				})

			},
			onChange(id) {
				this.activeId = id
				this.getImages(id)
			},
			// 图片预览功能
			viewImage(current) {
				const urls = this.imageList.map(item => {
					return item.img_url
				})

				uni.previewImage({
					urls,
					current
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.community {
		width: 750rpx;
		display: flex;
		height: 1575rpx;

		.left {
			width: 28%;
			height: 100%;
			// border: 2rpx solid black;
			border-right: 2rpx solid #eeeeee;

			.activeClass {
				color: #FFFFFF;
				background-color: #b50e03;
			}

			text {
				display: inline-block;
				width: 100%;
				height: 122rpx;
				text-align: center;
				line-height: 122rpx;
				// border-right: 2rpx solid #eeeeee;
				border-bottom: 2rpx solid #eeeeee;

				&:nth-last-child(1) {
					border: none;
				}
			}
		}

		.right {
			width: 72%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.right-item {
				width: 100%;

				.img {
					width: 100%;
				}
			}
		}
	}
</style>